<template>
	<view class="settings-page">
		<!-- 导航栏占位，实际导航栏由 pages.json 配置或自定义组件实现 -->
		<!-- <view class="nav-bar">
			<uni-icons type="left" size="24" @click="goBack"></uni-icons>
			<text class="nav-title">设置</text>
			<view style="width: 24px;"></view> 
		</view> -->

		<view class="setting-group" v-for="(group, groupIndex) in settings" :key="groupIndex">
			<view class="group-title" v-if="group.title">{{ group.title }}</view>
			<view class="setting-item" v-for="(item, itemIndex) in group.items" :key="itemIndex" @click="handleItemClick(item)">
				<text class="item-label">{{ item.label }}</text>
				<view class="item-value-wrapper">
					<text class="item-value" v-if="item.value">{{ item.value }}</text>
					<uni-icons type="right" size="16" color="#C0C4CC"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 退出按钮 -->
		 <view class="exit-button" @click="logout">
			<text class="exit-button-text">退出</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			settings: [
				{
					items: [
						{ label: '个人资料', action: 'navigateTo', path: '/pages/tb/my/editProfile' },
						{ label: '地址管理', action: 'navigateTo', path: '/pages/tb/my/addressList' },
						// { label: '尺码小助手', action: 'showToast', message: '尺码小助手功能待开发' },
						// { label: '账号与安全', action: 'showToast', message: '账号与安全功能待开发' },
					]
				},
				// {
				// 	title: '交易',
				// 	items: [
				// 		{ label: '支付方式', value: '免密支付等', action: 'showToast', message: '支付方式设置待开发' },
				// 		{ label: '收款方式', value: '开通微信收款', action: 'showToast', message: '收款方式设置待开发' },
				// 	]
				// },
				// {
				// 	title: '出租方服务',
				// 	items: [
				// 		{ label: '保障服务', action: 'showToast', message: '保障服务功能待开发' },
				// 	]
				// },
				// {
				// 	title: '通用',
				// 	items: [
				// 		{ label: '图片视频', action: 'showToast', message: '图片视频设置待开发' },
				// 		{ label: '消息通知', action: 'showToast', message: '消息通知设置待开发' },
				// 	]
				// }
			]
		};
	},
	onLoad() {
		// 可以在这里配置导航栏标题，如果使用 uniapp 默认导航栏
		uni.setNavigationBarTitle({
			title: '设置'
		});
	},
	methods: {
		logout(){
			// 清空 storage
			uni.clearStorageSync();
			// 重新打开  首页
			wx.reLaunch({
				url: '/pages/tb/home/home',
			})
		},
		goBack() {
			uni.navigateBack();
		},
		handleItemClick(item) {
			if (item.action === 'navigateTo' && item.path) {
				uni.navigateTo({
					url: item.path
				});
			} else if (item.action === 'showToast' && item.message) {
				uni.showToast({
					title: item.message,
					icon: 'none'
				});
			}
			// 可以根据 item.action 添加更多处理逻辑
		}
	}
};
</script>

<style lang="scss" scoped>
.settings-page {
	background-color: #f7f8fa;
	min-height: 100vh;
	padding-top: 1rpx; // 防止 margin-top塌陷
}

/* 如果使用自定义导航栏，可以取消注释这部分样式 */
/* .nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 44px; // 自定义导航栏高度
	padding: 0 15px;
	background-color: #fff;
	border-bottom: 1px solid #f0f0f0;
	position: sticky;
	top: 0;
	z-index: 999;
	.nav-title {
		font-size: 17px;
		font-weight: 500;
	}
} */

.setting-group {
	margin: 24rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	overflow: hidden; // 配合 border-radius

	.group-title {
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #909399; // 组标题颜色调深一点
	}

	.setting-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		position: relative;

		&:not(:last-child)::after { // 分割线
			content: '';
			position: absolute;
			left: 30rpx;
			right: 0;
			bottom: 0;
			height: 1px;
			background-color: #f5f5f5; // 分割线颜色
			transform: scaleY(0.5);
		}

		.item-label {
			font-size: 30rpx;
			color: #303133;
		}

		.item-value-wrapper {
			display: flex;
			align-items: center;
			color: #909399;
			.item-value {
				font-size: 28rpx;
				margin-right: 10rpx;
			}
		}
	}
}
.exit-button{
	margin-top: 100rpx;
	background-color: #fff;
	padding: 30rpx;
	border-radius: 16rpx;
	text-align: center;
	.exit-button-text{
		font-size: 30rpx;
		color: #303133;
		font-weight: bold;
	}
}
</style>